<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>task2</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <header>
        <h1>网站一级标题</h1>
        <nav>
            <ul>
                <li><a href="#">导航链接一</a></li>
                <li><a href="#">导航链接二</a></li>
                <li><a href="#">导航链接三</a></li>
                <li><a href="#">导航链接四</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>文章一级标题</h2>
            <h3>文章二级标题</h3>
            <address>文章作者&nbsp;文章发表时间</address>
            <p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                <a href="http://ife.baidu.com">这里有一个链接到http://ife.baidu.com</a>
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                <strong>这是一个粗体字</strong>
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
            </p>
            <p><img src="tu.jpg" alt="好看的图"></p>
            <p>
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                <a href="http://ife.baidu.com">这里有一个链接到http://ife.baidu.com</a>
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                <strong>这是一个粗体字</strong>
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
            </p>
        </article>
        <article>
            <h2>另一篇文章一级标题</h2>
            <h3>文章二级标题</h3>
            <address>文章作者&nbsp;文章发表时间</address>
            <p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                <a href="http://ife.baidu.com">这里有一个链接到http://ife.baidu.com</a>
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                <strong>这是一个粗体字</strong>
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
                这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，
            </p>
            <p><img src="tu.jpg" alt="好看的图"></p>
            <ul>
                <li>列表项目一</li>
                <li>列表项目二</li>
                <li>列表项目三</li>
            </ul>
        </article>
        <article>
            <dl>
                <dt><h2>图片</h2></dt>
                <dd><p>好看的图片</p>
                <img src="tu.jpg" alt="好看的图"></dd><br>
                <dd><p>好看的图片</p>
                <img src="tu.jpg" alt="好看的图"></dd><br>
                <dd><p>好看的图片</p>
                <img src="tu.jpg" alt="好看的图"></dd><br>
                <dd><p>好看的图片</p>
                <img src="tu.jpg" alt="好看的图"></dd><br>
                <dd><p>好看的图片</p>
                <img src="tu.jpg" alt="好看的图"></dd><br>
                <dd><p>好看的图片</p>
                <img src="tu.jpg" alt="好看的图"></dd><br>                                               
            </dl>
        </article>
        <article>
            <h2>最后一篇文章一级标题</h2>
            <h3>文章二级标题</h3>
            <address>文章作者&nbsp;文章发表时间</address>
            <ol>
                <li>排名1</li>
                <li>排名2</li>
                <li>排名3</li>
            </ol> 
            <table>
                <caption>下面是一个表格，border="1"</caption>
                <thead>
                <tr><td>表头</td><td>表头</td><td>表头</td></tr>
                </thead> 
                <tbody>
                <tr><td>表内容单元格</td><td>表内容单元格</td><td><a href="#">操作</a></td></tr>
                <tr><td>表内容单元格</td><td>表内容单元格</td><td><a href="#">操作</a></td></tr>
                <tr><td>表内容单元格</td><td>表内容单元格</td><td><a href="#">操作</a></td></tr>                    
                <tr><td>表内容单元格</td><td>表内容单元格</td><td><a href="#">操作</a></td></tr>
                </tbody>
                <tfoot>
                    <tr><td>总计</td><td colspan="2">1000</td></tr>
                </tfoot>
            </table> 
        </article>
    </main>
    <aside>
        <h2>这里是一个侧栏，这是侧栏标题</h2>
        <h3>侧栏窗口标题</h3>
        <form>
        <div class="tableRow"><p><label> 请输入邮箱地址</label></p><p><input placeholder="这是一个文本输入框" type="email"></p></div>
        <div class="tableRow"><p></p><p>邮箱地址请按要求格式输入</p></div>
        <div class="tableRow"><p><label>请输入密码</label></p><p><input type="password" placeholder="这是一个文本输入框"></p></div>
        <div class="tableRow"><p><label>请重复输入密码</label></p><p><input type="password" placeholder="这是一个文本输入框"></p></div>
        <div class="tableRow"><p></p><p>密码请为6-16英文数字</p></div>
        <div class="tableRow"><p>性别</p><p><input type="radio" name="sex" value="male" id="man"><label for="man">男</label>
              <input type="radio" name="sex" value="female" id="women"><label for="women">女</label>&nbsp;</p>
        </div>
        <div class="tableRow"><p>城市</p><p><select name="" id="">
                <option value="beijing" selected>北京</option>
                <option value="zhaoqing">肇庆</option>
                <option value="shenzhen">深圳</option>
            </select>&nbsp;</p>
        </div>
        <div class="tableRow"><p>爱好</p><p><label><input type="checkbox" name="sport">运动</label>
            <label><input type="checkbox" name="arts">艺术</label>
            <label><input type="checkbox" name="science">科学</label>&nbsp;</p>
        </div>
        <div class="tableRow"><p>个人描述</p><p><textarea name="" id="" cols="30" rows="2" placeholder="这是一个多行文本输入框，输入您的描述"></textarea></p>
        </div>
        <div class="tableRow"><p></p><p><input  type="submit" value="确认提交"></p></div> 
        </form>
    </aside>  
    <footer>版权所有@</footer>  
    </body>
</html>